<template>
  <el-container>
    <el-header class="headers">
        <div clsss="">
            <img src="../assets/logo.png" alt="">
            <span>电商后台管理系统</span>
        </div>
         <el-button type="info" v-on:click="logout">退出</el-button></el-header>
    <el-container class="main_box">
      <el-aside width="200px">


          <el-row class="tac">
  <el-col :span="12">
    <h5>自定义颜色</h5>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b" >
      <el-submenu index="1" >
        <template slot="title" >
          <i class="el-icon-location"></i>
          <span>222</span>
        </template>
         <el-menu-item index="1-1">
         <template slot="title" >
          <i class="el-icon-location"></i> 
          <span>111</span>
        </template>     
        </el-menu-item> 
      </el-submenu>
    </el-menu>
  </el-col>
</el-row>
      </el-aside>
      <el-main></el-main>
    </el-container>
  </el-container>
</template>
<script>
import { log } from 'util';
export default {
    data(){
        return {
             isCollapse: true,
             menulist:[],
             flag:false
        }
    },
  methods: {
    logout() {
      sessionStorage.removeItem('token')
      this.$router.push('/login')
    },
     getMenu(){
        let {data:res}= this.axios.get('menus').then((res)=>{
            // console.log(res);
            this.menulist=res.data.data
                   
        })

    },
    handleOpen(key, keyPath) {
        // console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        // console.log(key, keyPath);
      }
  },
  mounted(){
       this.getMenu(); 
  }
}
</script>

<style lang="less" scoped>
* {
    margin:0;
    padding:0;
}
.headers {
    margin:0;
    padding:0,20px;
    display:flex;
    background-color: #373D41;
    justify-content: space-between;
    div {
        height:60px;
        img {
            height: 100%;
            vertical-align: middle;
        }
        span {
            padding-left:20px;
            color:#fff;
            line-height: 60px;
            height: 60px;
            font-weight: 700;
        }

    }
  

}
.main_box {
    display: flex;
    height: 800px;
    .el-aside {
         background-color: green; 
    }
    .el-main {
        flex:1;
    }
}
 .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
 
 

</style>

